$(function() {
    // 封装初始化分类的函数
    function initCateList() {
        axios.get('/my/cate/list').then(({ data: res }) => {
            let arr = [];
            res.data.forEach(function(item, index) {
                arr.push(`
                <tr>
                        <td>${index + 1}</td>
                        <td>${item.cate_name}</td>
                        <td>${item.cate_alias}</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-xs btn-edit" data-msg="${item.id}">修改</button>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-msg="${item.id}">删除</button>
                        </td>
                    </tr>
              `)
            });
            $('tbody').html(arr)

        })

    }
    // 调用函数
    initCateList();
    // 定义全局变量,让不在同一个作用域的方便使用
    let addIndex = null;
    // 点击按钮， 展示添加的弹出层
    $('.layui-btn').on('click', function() {
        addIndex = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#template-add').html()
        })
    });


    // 自定义校验规则
    layui.form.verify({
        name: [/^\S{1,10}$/, '名称必须是1-10位的非空字符串'],
        alias: [/^[a-zA-Z0-9]{1,15}$/, '别名必须是1-15位的字母或数字']

    })

    // 监听表单的submit事件并向服务器发起请求(事件委托)
    $('body').on('submit', '#form-add', function(e) {
        e.preventDefault();
        let data = $(this).serialize();
        axios.post('/my/cate/add', data).then(({ data: res }) => {
            if (res.code == 0) {
                // 添加成功之后执行
                layer.msg('添加文章分类成功', { icon: 1 })
                    // 添加成功之后重新渲染页面
                initCateList();
                // 关闭弹出层
                layer.close(addIndex)
            }
        })
    })


    // 编辑功能
    // 为修改按钮绑定click事件
    let editIndex = null
    $('tbody').on('click', '.btn-edit', function() {
        // 根据id获取数据，不能根据索引值
        let id = $(this).attr('data-msg');
        if (id == 1 || id == 2) {
            return layer.msg('此条数据不允许修改')
        }
        editIndex = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#template-edit').html()
        })


        // 回显数据

        // 把查询到的数据回显到表单中

        // 发送请求， 根据id查询分类的数据
        axios.get('/my/cate/info', {
            params: {
                id: id
            }
        }).then(({ data: res }) => {
            if (res.code == 0) {
                layui.form.val('form-edit', res.data);
            }
        })

    })


    // 修改功能
    $('body').on('submit', '#form-edit', function(e) {
            e.preventDefault();
            let data = $(this).serialize();
            axios.put('/my/cate/info', data).then(({ data: res }) => {
                if (res.code == 0) {
                    // 重新渲染页面
                    initCateList();
                    // 关闭弹出层
                    layer.close(editIndex)
                }
            })
        })
        // 删除功能
    $('tbody').on('click', '.btn-delete', function() {

        let id = $(this).attr('data-msg');
        if (id == 1 || id == 2) {
            return layer.msg('不可以删除前两条数据')
        }
        layer.confirm('确定要删除吗？', { icon: 3, title: '提示' }, function(index) {
            //do something
            axios.delete('/my/cate/del', {
                params: {
                    id: id
                }
            }).then(({ data: res }) => {
                if (res.code == 0) {
                    initCateList()
                }
            })
            layer.close(index);
        });
    })














})